<template>
  <div class="carousel-wrapper">
    <div class="carousel-container">
      <div class="carousel-track" :style="{ transform: `translateX(-${currentIndex * slideWidth}px)` }">
        <div class="carousel-slide" v-for="(slide, index) in slides" :key="index">
          <img :src="slide.image" :alt="`Slide ${index + 1}`">
          <!-- 添加文字遮罩层 -->
          <div class="carousel-slide-caption">
            <p>{{ slide.caption || `Slide ${index + 1}` }}</p>
          </div>
        </div>
      </div>
      
      <button class="carousel-btn prev" @click="prevSlide">❮</button>
      <button class="carousel-btn next" @click="nextSlide">❯</button>
    </div>

    <div class="carousel-nav">
      <button 
        class="carousel-dot" 
        v-for="(dot, index) in dots" 
        :key="index"
        :class="{ active: index === Math.floor(currentIndex / visibleSlides) }"
        @click="goToSlide(index)"
      ></button>
    </div>
  </div>
</template>

<script>
export default {
  name: 'CarouseMapO',
  data() {
    return {
      currentIndex: 0,
      autoScrollInterval: null,
      visibleSlides: 3,
      slideWidth: 250 + 8, // 宽度250px + 间隙8px
      slides: [
        { image: 'https://picsum.photos/350/250?random=1', caption: 'Slide 1Slide 1Slide 1Slide 1Slide 1Slide 1' },
        { image: 'https://picsum.photos/350/250?random=2', caption: 'Slide 2' },
        { image: 'https://picsum.photos/350/250?random=3', caption: 'Slide 3' },
        { image: 'https://picsum.photos/350/250?random=4', caption: 'Slide 4' },
        { image: 'https://picsum.photos/350/250?random=5', caption: 'Slide 5' },
        { image: 'https://picsum.photos/350/250?random=6', caption: 'Slide 6' },
        { image: 'https://picsum.photos/350/250?random=7', caption: 'Slide 7' },
        { image: 'https://picsum.photos/350/250?random=8', caption: 'Slide 8' },
        { image: 'https://picsum.photos/350/250?random=9', caption: 'Slide 9' }
      ]
    }
  },
  computed: {
    dots() {
      return Array(Math.ceil(this.slides.length / this.visibleSlides)).fill(0)
    }
  },
  methods: {
    nextSlide() {
      if (this.currentIndex >= this.slides.length - this.visibleSlides) {
        this.currentIndex = 0;
      } else {
        this.currentIndex++;
      }
    },
    prevSlide() {
      if (this.currentIndex <= 0) {
        this.currentIndex = this.slides.length - this.visibleSlides;
      } else {
        this.currentIndex--;
      }
    },
    goToSlide(index) {
      this.currentIndex = index * this.visibleSlides;
      this.stopAutoScroll();
    },
    startAutoScroll() {
      this.stopAutoScroll();
      this.autoScrollInterval = setInterval(this.nextSlide, 3000);
    },
    stopAutoScroll() {
      clearInterval(this.autoScrollInterval);
    }
  },
  mounted() {
    this.startAutoScroll();
    
    // 鼠标悬停时暂停自动滚动
    const container = this.$el.querySelector('.carousel-container');
    container.addEventListener('mouseenter', this.stopAutoScroll);
    container.addEventListener('mouseleave', this.startAutoScroll);
  },
  beforeDestroy() {
    this.stopAutoScroll();
  }
}
</script>

<style scoped>
.carousel-container {
  margin-top: 30px;
  width: 100%;
  max-width: 766px; /* (250px + 8px) * 3 - 8px */
  position: relative;
  overflow: hidden;
  margin-left: 1px;
  height: 145px;
}

.carousel-track {
  display: flex;
  transition: transform 0.5s ease;
  gap: 8px;
  height: 100%;
}

.carousel-slide {
  width: 250px; /* 固定宽度250px */
  height: 100%;
  flex-shrink: 0;
  position: relative; /* 添加相对定位 */
  overflow: hidden; /* 防止放大的图片溢出 */
}

.carousel-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 6px;
  display: block; /* 防止图片底部间隙 */
  transition: transform 0.3s ease; /* 添加过渡效果 */
}

.carousel-slide:hover img {
  transform: scale(1.1); /* 鼠标悬停时图片放大 */
}

/* 文字遮罩层样式 */
.carousel-slide-caption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 30px;
  background-color: rgba(0, 0, 0, 0.7);
  color: white;
  display: flex;
  align-items: center;
  padding: 0 10px; /* 添加内边距 */
  border-bottom-left-radius: 6px;
  border-bottom-right-radius: 6px;
  transition: font-weight 0.3s ease; /* 添加过渡效果 */
}

.carousel-slide:hover .carousel-slide-caption p {
  font-weight: bold; /* 鼠标悬停时文字变粗 */
}

.carousel-slide-caption p {
  white-space: nowrap; /* 文字不换行 */
  overflow: hidden; /* 溢出内容隐藏 */
  text-overflow: ellipsis; /* 溢出内容用省略号表示 */
  width: 100%; /* 宽度占满父容器 */
  text-align: left; /* 文字左对齐 */
  margin: 0; /* 去除默认边距 */
}

.carousel-nav {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 12px;
  margin-bottom: 30px;
}

.carousel-dot {
  width: 30px;
  height: 10px;
  border-radius: 8px;
  background: #ccc;
  border: none;
  cursor: pointer;
}

.carousel-dot.active {
  background: #ff4d4f;
}

.carousel-btn {
  position: absolute;
  top: calc(50% - 16px);
  background: rgba(0, 0, 0, 0.5);
  color: white;
  border: none;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 16px;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
}

.carousel-btn:hover {
  color: #ff4d4f;
}

.carousel-btn.prev {
  left: 8px;
}

.carousel-btn.next {
  right: 8px;
}
</style>    